<template>
  <div
    class="fixed left-[0] top-[0] w-screen h-screen z-20 backdrop-blur-4xl bg-[#e5e5e5] pb-[.2rem] overflow-y-auto xl:p-[.2rem]"
  >
    <!-- 移动端下展示 navbar -->
    <m-navbar v-if="isMobileTerminal" @clickLeft="onPop" @clickRight="onPop">
      {{ data.title }}
      <template #right>
        <i
          class="iconfont icon-upload w-[.3rem] h-[.3rem] text-zinc-900 dark:text-zinc-200"
        ></i>
      </template>
    </m-navbar>
    <!-- pc 端下展示关闭图标 -->
    <i
      v-else
      class="w-[.3rem] h-[.3rem] text-center ml-[.1rem] p-[0.05rem] cursor-pointer duration-200 rounded-sm hover:bg-zinc-100 absolute right-[.2rem] top-[.2rem] text-zinc-400"
      @click="onPop"
    >
      X
    </i>

    <div class="xl:w-[80%] xl:h-full xl:mx-auto xl:rounded-lg xl:flex">
      <img
        class="w-screen mb-[.2rem] xl:w-3/5 xl:h-full xl:rounded-tl-lg xl:rounded-bl-lg"
        :src="data.photo"
      />
      <div
        class="xl:w-2/5 xl:h-full xl:bg-white xl:dark:bg-zinc-900 xl:rounded-tr-lg xl:rounded-br-lg xl:p-[.3rem]"
      >
        <div v-if="!isMobileTerminal" class="flex justify-between mb-[.2rem]">
          <i
            class="iconfont icon-upload w-[.4rem] h-[.4rem] p-[.1rem] cursor-pointer hover:bg-zinc-200 dark:hover:bg-zinc-800 duration-300 rounded-sm text-zinc-900 dark:text-zinc-200"
          ></i>

          <m-button class="text-zinc-900 dark:text-zinc-200" icon="woxihuan-" />
        </div>
        <!-- 标题 -->
        <p
          class="text-base text-zinc-900 dark:text-zinc-200 ml-1 font-bold xl:text-xl xl:mb-[.5rem]"
        >
          {{ data.title }}
        </p>
        <!-- 作者 -->
        <div class="flex items-center mt-[.1rem] px-[.1rem]">
          <img
            v-lazy
            class="h-[.3rem] w-[.3rem] rounded-full"
            :src="data.avatar"
            alt=""
          />
          <span class="text-base text-zinc-900 dark:text-zinc-200 ml-[.1rem]">{{
            data.author
          }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { getPexelsFromId } from '@/server/api/pexels'
import { isMobileTerminal } from '@/utils/flexible'
import { useSystemStore } from '@/store/system'

const props = defineProps({
  id: {
    type: String,
    required: true
  }
})

const systemStore = useSystemStore()
const data = ref({})

const getData = async () => {
  const res = await getPexelsFromId(props.id)
  data.value = res
}
getData()

/**
 * 关闭按钮处理事件
 */
const router = useRouter()
const onPop = () => {
  // 移动端下跳转类型
  systemStore.routerType = 'back'
  router.back()
}
</script>
